<template>
  <div class="personal">
    <div class="back">
      <div class="back2">
        <img :src="this.data" alt="" />
        <!-- <span>{{ avatarUrl }}</span> -->
        <div id="sp">
          <span>{{ newCount }}</span>
          <span>{{ follows.follows }}</span>
          <span>Lv.{{ level.level }}</span>
        </div>
        <div id="sp2">
          <a>粉丝</a>
          <a>关注</a>
          <a>等级</a>
        </div>
        <div class="bianji">
          <h5>编辑信息</h5>
        </div>
      </div>
    </div>

    <div class="playlist">
      <h2>创建的歌单</h2>
      <ul>
        <li v-for="(item, index) in playlist" :key="index">
          <van-cell :title="item.name" icon="music-o" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getdetailsAPI,
  getgradeAPI,
  getfollowAPI,
  getliquidAPI,
  getsonsheetAPI,
} from "../../api/user";
export default {
  name: "personal",
  data() {
    return {
      level: [],
      follows: [],
      newCount: [],
      avatarUrl: [],
      data: [],
      playlist: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    let uid = localStorage.getItem("uid");
    let userObj = JSON.parse(localStorage.getItem("userObj"));

    this.data = userObj.avatarUrl;
    console.log(this.data);
    this.getdetails(uid);
    this.getgrade();
    this.getfollow(uid);
    this.getliquid(uid);
    this.getsonsheet(uid);
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //用户登录信息
    async getdetails(uid) {
      console.log(uid);
      const result = await getdetailsAPI(uid);
      console.log(result);
      if (result.code === 200) {
        console.log(1);
      }
    },

    //用户等级信息
    async getgrade() {
      const result = await getgradeAPI();
      console.log(result);
      this.level = result.data;
    },

    //用户关注信息
    async getfollow(uid) {
      const result = await getfollowAPI(uid);
      console.log(result);
      this.follows = result.follow[0];
      console.log(this.follows);
    },

    //用户粉丝信息
    async getliquid(uid) {
      const result = await getliquidAPI(uid);
      console.log(result);
      this.newCount = result.newCount;
      console.log(this.newCount);
    },

    //获取用户歌单信息
    async getsonsheet(uid) {
      console.log(uid);
      const result = await getsonsheetAPI(uid);
      console.log(result);
      this.playlist = result.playlist;
    },
  },
};
</script>

<style scoped>
.back {
  width: 100%;
  height: 330px;
  background: #333;
  position: relative;
}
.back .back2 {
  width: 100%;
  height: 160px;
  background: #eee;
  position: absolute;
  bottom: 0px;
  opacity: 0.8;
}
.back .back2 img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 18px 15px 0;
}
#sp {
  width: 200px;
  height: 50px;
  /* background: #fff; */
  position: absolute;
  left: 170px;
  bottom: 80px;
}
#sp span {
  width: 60px;
  line-height: 50px;
  /* border: 1px solid #000; */
  padding: 0 14px;
  font-size: 16px;
}
#sp2 {
  width: 200px;
  height: 50px;
  /* background: #fff; */
  position: absolute;
  left: 170px;
  bottom: 55px;
}
#sp2 a {
  width: 60px;
  line-height: 50px;
  /* border: 1px solid #000; */
  padding: 0 6px;
  font-size: 16px;
}
.bianji {
  width: 100px;
  height: 30px;
  border-radius: 50px;
  border: 2px solid #000;
  position: absolute;
  left: 180px;
  bottom: 20px;
}
.bianji h5 {
  text-align: center;
  line-height: 30px;
}
.playlist {
  width: 80%;
  height: 100%;
  border: 2px solid #ccc;
  border-radius: 20px;
  margin: 20px auto;
}
.playlist h2 {
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
}
.playlist ul {
  width: 90%;
  margin: auto;
  padding-bottom: 10px;
}
.playlist li {
  border-bottom: 1px solid #ccc;
}
</style>
